<template>
   <div class="dingdan">
      <header>
        <span>全部</span>
        <span>待销费</span>
        <span>待评价</span>
        <span>退款</span>
      </header>
      <div class="list" v-for="(item,index) in tanklist" :key="index">
         <div class="top">
            <span>{{item.name}}</span>
            <span>已送达</span>
         </div>
         <div class="mid">
            <div class="left">
            <div class="img">
               <img src="" alt="">
            </div>
         </div>
         <div class="right">
            <p>￥{{item.price}}</p>
            <p>{{item.count}}</p>
         </div>
         </div>
         <div class="bottom">
            <p>再来一单</p>
         </div>
         
      </div>
      <div class="down">
         <span v-for="(item,index) in list " :key="index">{{item.btn}}</span>
      </div>
   </div>
</template>
  
  <script>

  export default {
    data(){
      return {
         tanklist:[
            {name:'纯手工饺子',price:17.8,count:6},
            {name:'棒打柠檬',price:7.8,count:23},
            {name:'菠菜面',price:11,count:550},
         ],
         list:[
            {btn:'首页'},
            {btn:'爆爆团'},
            {btn:'订单'},
            {btn:'我的'},
         ]
      }
    }
  };
  </script>
  
  <style>
   header{
      height: 40px;
      width: 100%;
      display: flex;
      align-items: center;
   }
   header span{
      padding: 10px;
   }
   .list{
      width: 100%;
      height: 100px;
      border: 1px solid black;
   }
   .top{
      height: 15px;
      width: 100%;
   }
   .mid{
      height: 70px;
      width: 100%;
      display: flex;
      justify-content: space-between;
   }
   .bottom{
      height: 15px;
      width: 100%;
   }
   .down{
      height: 40px;
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
   }
  </style>